<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
		<link href="default.css" rel="stylesheet" type="text/css" />
		<link href="post.css" rel="stylesheet" type="text/css" />
		<link href="shelf.css" rel="stylesheet" type="text/css" />
		<link href="setting.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body>
    <div class="wrap">
			<div class="main">
			<div class="head">
				<div class="head-nav">
				<ul class="head-nav-filter-list">
					<li class="head-nav-filter-list-item">
					<input type="checkbox" name="support" value="support" id="filter-support" />
					<span class="head-nav-filter-list-item-title"><label for="filter-support">最多支持</label></span>
					</li>
					<li class="head-nav-filter-list-item">
					<input type="checkbox" name="new" value="new" id="filter-new" />
					<span class="head-nav-filter-list-item-title"><label for="filter-new">最新发布</label></span>
					</li>
					<li class="head-nav-filter-list-item">
					<input type="checkbox" name="popular" value="popular" id="filter-popular" />
					<span class="head-nav-filter-list-item-title"><label for="filter-popular">最多评论</label></span>
					</li>
					<li class="head-nav-filter-list-item">
					<input type="checkbox" name="long" value="long" id="filter-long"/>
					<span class="head-nav-filter-list-item-title"><label for="filter-long">长的</label></span>
					</li>
					<li class="head-nav-filter-list-item">
					<input type="checkbox" name="short" value="short" id="filter-short" />
					<span class="head-nav-filter-list-item-title"><label for="filter-short">短的</label></span>
					</li>
				</ul>
				<ul class="head-nav-menu-list">
					<li class="head-nav-menu-list-item" title="search"><img src="menu/search.png" /></li>
					<li class="head-nav-menu-list-item" title="shelf"><img src="menu/shelf.png" /></li>
					<li class="head-nav-menu-list-item" title="setting"><img src="menu/setting.png" /></li>
					<li class="head-nav-menu-list-item" title="post"><img src="menu/post.png" /></li>
				</ul>
				</div>
				<div class="head-modal"></div>
			</div>
			<div class="cont">
				<ul class="cont-article-list">
				<li class="cont-article-list-item">
					<div class="cont-article-list-item-title">
					<ul class="cont-article-list-item-title-all">
						<li class="cont-article-list-item-title-text">南京大屠杀周年纪念</li>
						<li class="cont-article-list-item-title-tag-item">长的</li>
						<li class="cont-article-list-item-title-tag-item">生活</li>
					</ul>
					</div>
					<div class="cont-article-list-item-cont">	好工作不见得薪水高,却让你进步。你在工作中被逼得不断学习,就算现在没机会,以后也会大家抢。相反,薪水高但学不到东西,不能算好工作。因为它八成没变化,十年后的你跟今天没有差异。它非但不能给你前途,在单位也可能被淘汰。所以月薪加上学习价值,才是真正的薪资。附全面薪酬体系图<a href="#">...更多...</a>
					</div>
					<div class="cont-article-list-item-date">9月18日 23:12</div>
					<div class="cont-article-list-item-author">小六子</div>
					<div class="cont-article-list-item-clear"></div>			
				</li>
				<li class="cont-article-list-item">
					<div class="cont-article-list-item-title">
					<ul class="cont-article-list-item-title-all">
						<li class="cont-article-list-item-title-text">南京大屠杀周年纪念</li>
						<li class="cont-article-list-item-title-tag-item">长的</li>
						<li class="cont-article-list-item-title-tag-item">生活</li>
					</ul>
					</div>
					<div class="cont-article-list-item-cont">	好工作不见得薪水高,却让你进步。你在工作中被逼得不断学习,就算现在没机会,以后也会大家抢。<a href="#">...更多...</a>
					</div>
					<div class="cont-article-list-item-date">9月18日 23:12</div>
					<div class="cont-article-list-item-author">小六子</div>
					<div class="cont-article-list-item-clear"></div>			
				</li>
				<li class="cont-article-list-item">
					<div class="cont-article-list-item-title">
					<ul class="cont-article-list-item-title-all">
						<li class="cont-article-list-item-title-text">南京大屠杀周年纪念</li>
						<li class="cont-article-list-item-title-tag-item">长的</li>
						<li class="cont-article-list-item-title-tag-item">生活</li>
					</ul>
					</div>
					<div class="cont-article-list-item-cont">	好工作不见得薪水高<a href="#">...更多...</a>
					</div>
					<div class="cont-article-list-item-date">9月18日 23:12</div>
					<div class="cont-article-list-item-author">小六子</div>
					<div class="cont-article-list-item-clear"></div>			
				</li>
				<li class="cont-article-list-item">
					<div class="cont-article-list-item-title">
					<ul class="cont-article-list-item-title-all">
						<li class="cont-article-list-item-title-text">南京大屠杀周年纪念</li>
						<li class="cont-article-list-item-title-tag-item">长的</li>
						<li class="cont-article-list-item-title-tag-item">生活</li>
					</ul>
					</div>
					<div class="cont-article-list-item-cont">	好工作不见得薪水高,却让你进步。你在工作中被逼得不断学习,就算现在没机会,以后也会大家抢。相反,薪水高但学不到东西,不能算好工作。因为它八成没变化,十年后的你跟今天没有差异。它非但不能给你前途,在单位也可能被淘汰。所以月薪加上学习价值,才是真正的薪资。附全面薪酬体系图<a href="#">...更多...</a>
					</div>
					<div class="cont-article-list-item-date">9月18日 23:12</div>
					<div class="cont-article-list-item-author">小六子</div>
					<div class="cont-article-list-item-clear"></div>			
				</li>
				</ul>
			</div>	
			<div class="side-left">
				<ul class="side-left-list">
				<li class="side-left-list-item">全部</li>
				<li class="side-left-list-item cur">生活</li>
				<li class="side-left-list-item">娱乐</li>
				<li class="side-left-list-item">科技</li>
				<li class="side-left-list-item">广告</li>
				<li class="side-left-list-item">军事</li>
				<li class="side-left-list-item">财经</li>
				<li class="side-left-list-item">体育</li>
				</ul>
			</div>
			<div class="side-right">
				<div class="side-right-title">生活</div>
				<div class="side-right-cont">
				生活是日子与日子的简单重复,在日复一日的重复中,我们不断地失去心中的梦想,
				然而,又在一次次的失望中寻求新的希望...
				</div>
			</div>
			</div>
		</div>
		<script src="jquery.min.js"></script>
		<script src="jquery.mCustomScrollbar.concat.min.js"></script>
		<script>
			$(function(){
			$(".head-modal-follow").mCustomScrollbar({
				theme:"light-thick"
			});
			
			$.fx.speeds._default = 1000;
			$(".head-modal").hide();
			onm = '<div class="on"></div>';
			otxt = '';
			clk = true;
			$(".head-nav-menu-list-item").click(function(){
				itxt = $(this).attr('title');
				//modal control
				if( itxt != 'search'){
				$(".on").remove();
				if(itxt == otxt || otxt == ''){
					clk = clk ? mshow($(this)) : mhide($(this));
				}else{
					clk = mshow($(this));
				}
				}
				//for each modal
				switch (itxt) {
				case 'shelf':
					shelf='<div class="head-modal-shelf-menu"><ul class="head-modal-shelf-menu-list"><li class="head-modal-shelf-menu-list-item" title="follow"><img src="icon/digg.png" alt="选定订阅内容"/></li><li class="head-modal-shelf-menu-list-item" title="default"><img src="icon/default.png" alt="默认的内容"/></li><li class="head-modal-shelf-menu-list-item" title="own"><img src="icon/firefox.png" alt="自己的内容"/></li><li class="head-modal-shelf-menu-list-item" title="saved"><img src="icon/like.png" alt="收藏的内容"/></li></ul></div><div class="head-modal-follow"><ul class="head-modal-follow-list"><li class="head-modal-follow-list-item"><label for="uid-1"><div class="head-modal-follow-list-author">小六子</div><div class="head-modal-follow-list-dp"><img src="icon/appnet.png" /></div><div class="head-modal-follow-list-desc">自由撰稿人 流氓兔</div></label><div class="head-modal-follow-list-cancel">X</div><input type="checkbox" class="head-modal-follow-list-select" name="uid-1" id="uid-1" /></li><li class="head-modal-follow-list-item"><label for="uid-2"><div class="head-modal-follow-list-author">久子</div><div class="head-modal-follow-list-dp"><img src="icon/appnet.png" /></div><div class="head-modal-follow-list-desc">中国人民共和国国卫军 英勇无敌</div></label><div class="head-modal-follow-list-cancel">X</div><input type="checkbox" class="head-modal-follow-list-select" name="uid-2" id="uid-2" /></li></ul></div>';
					$('.head-modal').html(shelf);
					$('.head-modal-follow-list-cancel').hide();
					$('li[title=follow]').hide();
					$('.head-modal-follow-list-select').change(function(){
					if($('.head-modal-follow-list-select:checked').length == 0){
						$('li[title=follow]').hide();
					}
					var cl = $(this).parent().children('.head-modal-follow-list-cancel');
					if(this.checked){
						cl.show();
						$('li[title=follow]').show();
					}else{
						cl.hide();
					}	
					});
					delete shelf;
					break;
				case 'setting':
					setting='<div class="head-modal-option"><div class="head-modal-option-name"><div class="sub-wrap"><span class="head-modal-option-cancel">X</span><input class="head-modal-option-name-text" name="option-uname" type="text" value="伟大的管理员" maxlength="8" /></div></div><div class="head-modal-option-pwd"><div class="sub-wrap"><div class="head-modal-option-pwd-u"><span class="head-modal-option-cancel">X</span><span class="head-modal-option-pwd-label">密码: </span><input class="head-modal-option-pwd-text" name="option-pwd-u" type="text" value="upwd" maxlength="6" /></div><div class="head-modal-option-pwd-v"><span class="head-modal-option-cancel">X</span><span class="head-modal-option-pwd-label">确认新密码: </span><input class="head-modal-option-pwd-text" name="option-pwd-v" type="text" value="upwdv" maxlength="6" /></div></div></div><div class="head-modal-option-dp"><div class="sub-wrap"><span class="head-modal-option-cancel">X</span><img class="head-modal-option-dp-img" src="dp.png" alt="user dp" /></div></div><div class="head-modal-option-email"><div class="sub-wrap"><span class="head-modal-option-cancel">X</span><span class="head-modal-option-email-label">Email: </span><input class="head-modal-option-email-text" name="option-email" type="text" value="admin@fun.com" maxlength="24" /></div></div><div class="head-modal-option-desc"><div class="sub-wrap"><span class="head-modal-option-cancel">X</span><input class="head-modal-option-desc-text" name="option-desc" type="text" value="我就是伟大的管理员,有事您说话" maxlength="30" /></div></div></div><div class="head-modal-setting-menu"><ul class="head-modal-setting-menu-list"><li class="head-modal-setting-menu-list-item" title="confirm">确认更改</li><li class="head-modal-setting-menu-list-item" title="cancel">取消</li></ul></div>';
					$('.head-modal').html(setting);		
					$(".head-modal-option-cancel").click(function(){
						$(this).siblings("input[type=text]").val('').css({"background":"#393939"}).focus();
					});
					delete setting;
					break;
				case 'post':
					post='<div class="head-modal-post-type"><ul class="head-modal-post-type-list"><li class="head-modal-post-type-list-item set">转载</li><li class="head-modal-post-type-list-item">原创</li></ul></div><div class="head-modal-post-cate"><span class="head-modal-post-cate-label">文章类别</span><ul class="head-modal-post-cate-list"><li class="head-modal-post-cate-list-item">生活</li><li class="head-modal-post-cate-list-item">娱乐</li><li class="head-modal-post-cate-list-item">科技</li><li class="head-modal-post-cate-list-item">广告</li><li class="head-modal-post-cate-list-item">军事</li><li class="head-modal-post-cate-list-item">财经</li><li class="head-modal-post-cate-list-item">体育</li></ul></div><div class="head-modal-post-body"><div class="head-modal-post-title"><span class="head-modal-post-title-label">文章标题</span><input class="head-modal-post-title-text" type="text" name="post-title" /></div><div class="head-modal-post-cont"><span class="head-modal-post-cont-label">文章内容</span><textarea class="head-modal-post-cont-text" name="post-cont"></textarea></div></div><div class="head-modal-post-tag"><span class="head-modal-post-tag-label">文章标签</span><input class="head-modal-post-tag-text" type="text" name="post-tag" /></div><div class="head-modal-post-menu"><ul class="head-modal-post-menu-list"><li class="head-modal-post-menu-list-item">发布</li><li class="head-modal-post-menu-list-item">存为草稿</li></ul></div>';
					$('.head-modal').html(post);
					$(".head-modal-post-type-list-item").click(function(){
						type = $(this).text();
						$(".head-modal-post-type-list-item").removeClass("set");
						$(this).addClass("set");	
						if(type == "原创"){
							$(".head-modal-post-title-label").text("文章网址");
							$(".head-modal-post-cont-label").text("转载介绍");
						}else{
							$(".head-modal-post-title-label").text("文章标题");
							$(".head-modal-post-cont-label").text("文章内容");
						}
					});
					delete post;
					break;
				}
				otxt = itxt;
			});
			})
			function mshow(e){
			e.append(onm);
			$(".head-modal").css({height:'0'}).show(1).animate({height: '20em'},1000);
			return false;
			}
			function mhide(e){
			$('.on').remove();
			$(".head-modal").animate({height: '0'},1000).hide(1);
			return true;
			}
		</script>
  </body>
</html>
